<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Example</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <div>
        <label for="tm">模板图幅名：</label>
        <input type="text" id="tm" v-model="tm">
    </div>
    <div>
        <label for="lr">LR：</label>
        <input type="number" id="lr" v-model.number="lr">
    </div>
    <div>
        <label for="ud">UD：</label>
        <input type="number" id="ud" v-model.number="ud">
    </div>
    <button @click="processFrames">Process Frames</button>
    <div v-if="result">
        <p>处理结果：</p>
        <pre>{{ result }}</pre>
    </div>
</div>

<script>
    const app = Vue.createApp({
        data() {
            return {
                tm: 'A1',
                lr: 1,
                ud: 0,
                frameJson: [{"ID":0.0,"Name":"A0","Name2":"A0","Size":0,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1189, 841","DirectionMode":0},{"ID":1.0,"Name":"A0+1/8","Name2":"A0+0.125","Size":0,"Extent":1,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1338, 841","DirectionMode":0},{"ID":2.0,"Name":"A0+1/4","Name2":"A0+0.25","Size":0,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1486, 841","DirectionMode":0},{"ID":3.0,"Name":"A0+3/8","Name2":"A0+0.375","Size":0,"Extent":3,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1635, 841","DirectionMode":0},{"ID":4.0,"Name":"A0+1/2","Name2":"A0+0.5","Size":0,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1783, 841","DirectionMode":0},{"ID":5.0,"Name":"A0+5/8","Name2":"A0+0.625","Size":0,"Extent":5,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1932, 841","DirectionMode":0},{"ID":6.0,"Name":"A0+3/4","Name2":"A0+0.75","Size":0,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2080, 841","DirectionMode":0},{"ID":7.0,"Name":"A0+7/8","Name2":"A0+0.875","Size":0,"Extent":7,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2230, 841","DirectionMode":0},{"ID":8.0,"Name":"A0+1","Name2":"A0+1","Size":0,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2378, 841","DirectionMode":0},{"ID":1000.0,"Name":"A1","Name2":"A1","Size":1,"Extent":0,"ItemRect":{"LeftBottom":{"X":0.94293749478134226,"Y":0.32659932659934165},"RightTop":{"X":0.9880285980499911,"Y":0.35353535354452503}},"TitleRect":{"LeftBottom":{"X":0.91668495952241358,"Y":0.27272727272806391},"RightTop":{"X":0.98810939357907257,"Y":0.31537416033841109}},"NumberRect":{"LeftBottom":{"X":0.94293749478163069,"Y":0.21885521885524176},"RightTop":{"X":0.98802859804899723,"Y":0.23232323232325522}},"SizeRect":null,"Measurement":"841, 594","DirectionMode":0},{"ID":1002.0,"Name":"A1+1/4","Name2":"A1+0.25","Size":1,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1051, 594","DirectionMode":0},{"ID":1004.0,"Name":"A1+1/2","Name2":"A1+0.5","Size":1,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1261, 594","DirectionMode":0},{"ID":1006.0,"Name":"A1+3/4","Name2":"A1+0.75","Size":1,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1471, 594","DirectionMode":0},{"ID":1008.0,"Name":"A1+1","Name2":"A1+1","Size":1,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1682, 594","DirectionMode":0},{"ID":1010.0,"Name":"A1+5/4","Name2":"A1+1.25","Size":1,"Extent":10,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1892, 594","DirectionMode":0},{"ID":1012.0,"Name":"A1+3/2","Name2":"A1+1.5","Size":1,"Extent":12,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2102, 594","DirectionMode":0},{"ID":1014.0,"Name":"A1+7/4","Name2":"A1+1.75","Size":1,"Extent":14,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2313, 594","DirectionMode":0},{"ID":1016.0,"Name":"A1+2","Name2":"A1+2","Size":1,"Extent":16,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2523, 594","DirectionMode":0},{"ID":1018.0,"Name":"A1+9/4","Name2":"A1+2.25","Size":1,"Extent":18,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2734, 594","DirectionMode":0},{"ID":1020.0,"Name":"A1+5/2","Name2":"A1+2.5","Size":1,"Extent":20,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"2944, 594","DirectionMode":0},{"ID":2000.0,"Name":"A2","Name2":"A2","Size":2,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"594, 420","DirectionMode":0},{"ID":2002.0,"Name":"A2+1/4","Name2":"A2+0.25","Size":2,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"743, 420","DirectionMode":0},{"ID":2004.0,"Name":"A2+1/2","Name2":"A2+0.5","Size":2,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"891, 420","DirectionMode":0},{"ID":2006.0,"Name":"A2+3/4","Name2":"A2+0.75","Size":2,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1041, 420","DirectionMode":0},{"ID":2008.0,"Name":"A2+1","Name2":"A2+1","Size":2,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1189, 420","DirectionMode":0},{"ID":2010.0,"Name":"A2+5/4","Name2":"A2+1.25","Size":2,"Extent":10,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1338, 420","DirectionMode":0},{"ID":2012.0,"Name":"A2+3/2","Name2":"A2+1.5","Size":2,"Extent":12,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1486, 420","DirectionMode":0},{"ID":3000.0,"Name":"A3","Name2":"A3","Size":3,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"420, 297","DirectionMode":0},{"ID":3002.0,"Name":"A3+1/4","Name2":"A3+0.25","Size":3,"Extent":2,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"525, 297","DirectionMode":0},{"ID":3004.0,"Name":"A3+1/2","Name2":"A3+0.5","Size":3,"Extent":4,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"630, 297","DirectionMode":0},{"ID":3006.0,"Name":"A3+3/4","Name2":"A3+0.75","Size":3,"Extent":6,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"735, 297","DirectionMode":0},{"ID":3008.0,"Name":"A3+1","Name2":"A3+1","Size":3,"Extent":8,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"841, 297","DirectionMode":0},{"ID":3012.0,"Name":"A3+3/2","Name2":"A3+1.5","Size":3,"Extent":12,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1051, 297","DirectionMode":0},{"ID":3016.0,"Name":"A3+2","Name2":"A3+2","Size":3,"Extent":16,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1261, 297","DirectionMode":0},{"ID":3020.0,"Name":"A3+5/2","Name2":"A3+2.5","Size":3,"Extent":20,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1471, 297","DirectionMode":0},{"ID":3024.0,"Name":"A3+3","Name2":"A3+3","Size":3,"Extent":24,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1682, 297","DirectionMode":0},{"ID":3028.0,"Name":"A3+7/2","Name2":"A3+3.5","Size":3,"Extent":28,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"1892, 297","DirectionMode":0},{"ID":4000.0,"Name":"A4","Name2":"A4","Size":4,"Extent":0,"ItemRect":null,"TitleRect":null,"NumberRect":null,"SizeRect":null,"Measurement":"297, 210","DirectionMode":0}], // 模拟 frame.json 的数据
                result: null
            };
        },
        methods: {
            processFrames() {
                // 模拟加载 frame.json 文件
                // 这里使用 setTimeout 模拟异步操作
                setTimeout(() => {
                    // 模拟处理 frames 的逻辑
                    let processedFrames = [...this.frameJson];
                    for (let frame of processedFrames) {
                        // 模拟处理每个 frame 的逻辑
                        for (let name of ['ItemRect', 'TitleRect', 'NumberRect', 'SizeRect']) {
                            if (frame[name]) {
                                // 模拟对比例定位的处理
                                // 这里只是简单示例，具体实现需要根据实际需求编写逻辑
                                frame[name] = this.dwAccordingToLocation(frame[name], this.lr, this.ud);
                                // 模拟从绝对定位到比例定位的处理
                                frame[name] = this.getScale(frame['Measurement'], frame[name]);
                            }
                        }
                    }
                    this.result = JSON.stringify(processedFrames, null, 2);
                }, 500); // 模拟异步加载延迟
            },
            dwAccordingToLocation(rect, lr, ud) {
                // 模拟处理定位点的逻辑
                // 根据 LR 和 UD 处理 rect
                return rect;
            },
            getScale(measurement, rect) {
                // 模拟处理比例的逻辑
                return rect;
            }
        },
        mounted() {
            // 模拟加载 frame.json 文件
            // 这里使用 setTimeout 模拟异步操作
            setTimeout(() => {
                // 模拟读取 frame.json 文件的数据
                this.frameJson = [
                    {'DirectionMode': '不确定', 'Extent': '加长n/8', 'ID': '', 'Measurement': '图纸尺寸',
                        'ItemRect': '子项', 'NumberRect': '图号', 'SizeRect': '可能是图幅的定位', 'TitleRect': '图名定位',
                        'Name': '图幅名', 'Name2': '图幅名', 'Size': '不确定'},
                    {'LeftBottom': {'X': '比例定位', 'Y': '比例定位'}, 'RightTop': {'X': '比例定位', 'Y': '比例定位'}}
                ]; // 这里只是简单示例，实际应用需要根据实际需求加载数据
            }, 500); // 模拟异步加载延迟
        }
    });

    app.mount('#app');
</script>
</body>
</html>
